<template>
  <div>
    <div class="add-permiss-box">
      <el-input v-model="newRole.name" placeholder="请输入角色英文名" size="small">
        <template #prepend>ROLE_</template>
      </el-input>
      <el-input v-model="newRole.nameZh" placeholder="请输入角色中文名" size="small"/>
      <el-button icon="el-icon-plus" @click="addRole" size="small" type="primary">添加角色</el-button>
    </div>
    <div class="permiss-main-box">


       <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="角色英文名" />
       <el-table-column prop="nameZh" label="角色中文名" />
      <el-table-column label="操作" width="250">
            <template #default="scope">
              <el-button
                size="mini"
                @click="showAddMenuDialog(scope.row.id, scope.row.nameZh)"
                type="primary"
                >添加资源</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="deleteRole(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      <div class="collapse-box">
      </div>
    </div>

  </div>

  <MenuTree :centerDialogVisible="centerDialogVisible"  v-if="centerDialogVisible === true" :roleId="roleId" :roleName="roleName" @closeRoleDialog="closeRoleDialog"/>

</template>

<script>
import {deleteRequest, getRequest, postRequest} from "@/utils/api";
import {ElMessage} from "element-plus";
import { reactive,toRefs ,onMounted} from "vue";
import MenuTree from './MenuTree.vue'



export default {
  name: "PermissManage",
  components:{MenuTree},
  setup() {
     
    // 全部菜单列表
     


      const state = reactive({
           tableData:[],
           newRole:{
             name:'',
             nameZh:''
           },
           centerDialogVisible:false ,
           roleId:'',
           roleName: ''
    })

    const showAddMenuDialog = (id,nameZh)=>{
      state.centerDialogVisible = true ;
      state.roleId = id ;
      state.roleName = nameZh ;
    }

    const closeRoleDialog=()=>{
      state.centerDialogVisible = false ;
    }

    const initRole = () =>{
      state.newRole.name = '';
      state.newRole.nameZh = '';
      getRequest('/system/basic/permiss/').then(res => {
        if (res) {
          state.tableData = res;
        }
      });
     
    }
   const addRole = ()=> {
      if (state.newRole.name && state.newRole.nameZh) {
        postRequest('/system/basic/permiss/role', state.newRole).then(res => {
          if (res) {
             ElMessage.success('添加成功');
            initRole();
          }
        })
      } else {
        ElMessage.error('所有字段不能为空');
      }
    }
    const deleteRole = (rid) =>{
      deleteRequest('/system/basic/permiss/role/' + rid).then(res => {
        if (res) {
          ElMessage.success('删除成功');
          initRole();
        }
      })
    }

 

   

    onMounted(()=>{
      initRole()
    })
    return {
        ...toRefs(state),
    showAddMenuDialog,closeRoleDialog,
      
      addRole,deleteRole
    }
  }  
}
</script>

<style scoped>
.add-permiss-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.add-permiss-box .el-input {
  width: 40%;
  margin-right: 15px;
}

.permiss-main-box .collapse-box {
  margin-top: 25px;
}
</style>
